<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #div_1{
	  width:200px;
	  height:20px;
	  margin:auto;
	}
    #div_2{
	  width:200px;
	  height:50px;
	  border:solid 1px black;
	  margin:auto;
	   
	}
  </style>
 </head>
 <body>
  <div id="div_1">
  <button id="btn_1">按钮1</button>
  <button id="btn_2">按钮2</button>
  </div>
  <div id="div_2">
      <span id="span_1">我是按钮1</span> 
	  <span id="span_2">我是按钮2</span> 
  </div>
 </body>
  <script>
    var btn_1 = document.getElementById("btn_1");
	var btn_2 = document.getElementById("btn_2");
	var span_1 = document.getElementById("span_1");
	var span_2 = document.getElementById("span_2");
	span_2.style.display = "none";
	btn_1.addEventListener("click",function(){
	   span_2.style.display = "none";
	   span_1.style.display = "block";
	})
	btn_2.addEventListener("click",function(){
	   span_1.style.display = "none";
	   span_2.style.display = "block";
	})
 </script>
</html>
